<template>
    <!-- 整体页面框架 -->
	<el-row class="container">
     <!-- 头部 -->
     	<el-col :span="24" class="header">
         <!-- Logo -->
			<el-col :span="10" class="logo logo-width"   v-bind:class="{ win60: isCollapse }">
				{{sysName}}
			</el-col>
       <!-- Logo -->
			<el-col :span="4" >
			 <el-radio-group v-model="isCollapse" size="small" style="    margin-bottom: 0px; margin-left: 15px;">
  <el-radio-button :label="false"  >展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
			</el-col>
			<el-col :span="10" class="userinfo">
        <el-row>
      <!-- 个人信息下拉 -->
  <el-col :span="24">
   <el-dropdown trigger="click" class="shklcon" >
      <span class="el-dropdown-link userinfo-inner">
        <img src="https://storage.360buyimg.com/i.imageUpload/3130323236383834382d38353430333631343939373539303031363535_mid.jpg">
        <span>{{sysUserName}}</span>
       <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
        </el-col>
            <!-- 个人信息下拉 -->
</el-row>
			</el-col>
		</el-col>
     <!-- 头部 -->

     <!-- 内容 -->
 <el-col :span="24" class="main">
         <!-- 左侧导航栏 -->
   <el-menu  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" >
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">我的客户</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="1-1"><router-link to="">创建客户</router-link></el-menu-item>
      <el-menu-item index="1-2"><router-link to="">相关客户</router-link></el-menu-item>
    </el-menu-item-group>
  </el-submenu>

  <el-submenu index="2">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">工单管理</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="2-1"> <router-link to="">新建工单</router-link></el-menu-item>
      <el-menu-item index="2-2"><router-link to="">相关工单</router-link></el-menu-item>
      <el-menu-item index="2-3"><router-link to="">共享工单</router-link></el-menu-item>
    </el-menu-item-group>
  </el-submenu>

 <el-submenu index="3">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">系统管理</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="3-1"><router-link to="">修改密码</router-link></el-menu-item>
      <el-menu-item index="3-2"><router-link to="">员工管理</router-link></el-menu-item>
      <el-menu-item index="3-3"><router-link to="">资料字段</router-link></el-menu-item>
    </el-menu-item-group>
  </el-submenu>


</el-menu>
     <!-- 左侧导航栏 -->
     <!-- 右侧内容 -->
     <section class="content-container">
       	<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
     </section>
     <!-- 右侧内容 -->
      </el-col>
     <!-- 内容 -->
	</el-row>
   <!-- 整体页面框架 -->
</template>
]
<script>
export default {
  data() {
    return {
      sysName: "Y3工单系统", //公司名称
      sysUserName: "Y3超级管理员", //用户名字，
     isCollapse: false
    };
  },
   methods: {
      handleOpen(key, keyPath) {
    
      },
      handleClose(key, keyPath) {
    
      }
    }
};
</script>
<style lang="less">
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  background: #EFF3F6;
    color: #3f464c;
  .header {
    height: 60px;
    line-height: 60px;
    background: #fff;
    border-bottom: 1px solid #f4f3f8;
    .shklcon {
      padding: 0 20px;
      cursor: pointer;
      &:hover {
        background-color: #ecf5ff;
        color: #1a98ff;
      }
    }
    .userinfo {
      text-align: right;
      padding-right: 15px;
      float: right;
      .userinfo-inner img {
        display: inline-block;
        width: 35px;
        height: 35px;
        vertical-align: middle;
        border-radius: 50%;
        margin: 0 4px;
      }
      .grid-content {
        width: 30px;
        height: 30px;
        border-left: 1px solid #f4f3f8;
        line-height: 30px;
        margin-top: 15px;
        padding: 0 15px;
        i {
          color: #8d9ea7;
          font-size: 22px;
          line-height: 30px;
          cursor: pointer;
          &:hover {
            color: #1a98ff;
          }
        }
      }
    }
    .logo {
      //width:230px;
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: #f4f3f8;
      border-right-width: 1px;
      border-right-style: solid;
      text-align: center;
      color: #fff;
      -webkit-transition: all 0.3s linear;
        background:-webkit-linear-gradient(left,#3994f4,#107ff4);
            background:-o-linear-gradient(right,#3994f4,#107ff4);
            background:-moz-linear-gradient(right,#3994f4,#107ff4);
            background:linear-gradient(to right,#3994f4,#107ff4);
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #fff;
      }
    }
    .logo-width {
      width: 230px;
    }
    .logo-collapse-width {
      width: 60px;
    }
    .tools {
      padding: 0px 23px;
      width: 100px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }
  }
  //内容
  .main{
    	display: flex;
			// background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
      overflow: hidden;
      	.content-container {
				flex:1;
				overflow-y: scroll;
        padding: 20px;
        .content-wrapper{
					box-sizing: border-box;
        }
        }
   .el-menu-item a:focus, .el-menu-item a:hover {
    outline: 0;
    background-color: #1D2531;
   color:#1a98ff;
}
  }
}
 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 230px;
    overflow-y: auto;
  }
  .el-menu-item-group__title{
    padding: 0;
  }
.el-menu{
  background:#283142;
}
.el-submenu__title,.el-menu-item a{
  color:#98a0b3;
  text-decoration: none;
  &:hover{
      background-color: #1D2531;
      color:#1a98ff;
  } 
}

  .is-opened{
   color:#1a98ff;
   .el-menu-item{
     background: #1d2530;
   }
  }


.wi-nav{
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    div{
        background: #fff;
        float: left;
        padding: 12px 15px;
        margin-right: 15px;
        cursor: pointer;
        a{
            color: #999;
            text-decoration: none;
        }
         &:hover{          
          
            a{
  color: #409EFF;    
            }     
            }
            &.active{
                    background:#409EFF;
                a{
                     color: #fff;
                }
                &:hover{
                    opacity: 0.8;
                }
            }
    }
   
}
.container .header .win60{
  width: 64px;
}
</style>

